<!DOCTYPE html>
<html>
<head>
    <title>社交设置</title>
    <#include "/header.html">
</head>
<body>
<div id="webpage"  v-cloak>
    <div class="padding">
        <div sclass="padding15-0">
            <div>
                <form @submit.prevent="save">
                    <div v-for="(cfg,key) in queryConfigList()">
                        
                        <div v-if="key == 'assets.matching.daily.limit'"  class="form-group">
                            <label class="block"><em class="key">{{cfg.paramKey}}</em>{{cfg.name}} <span class="tip">( {{cfg.remark}} )</span></label>
                            <div class="padding10">
                                <div class="form-group">
                                    <label>每日兴趣匹配次数</label>
                                    <div class="padding10">
                                        <input type="text" class="form-control" v-model="form[key].interest" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>每日形象匹配次数</label>
                                    <div class="padding10">
                                        <input type="text" class="form-control" v-model="form[key].sence" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>每日声音匹配次数</label>
                                    <div class="padding10">
                                        <input type="text" class="form-control" v-model="form[key].voice" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>每日定位匹配次数</label>
                                    <div class="padding10">
                                        <input type="text" class="form-control" v-model="form[key].location" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="key == 'assets.user.defaultAvatar'" class="form-group">
                            <label class="block"><em class="key">{{cfg.paramKey}}</em>{{cfg.name}} <span class="tip">( {{cfg.remark}} )</span><span class="clearfix"></span></label>
                            <div class="padding10">
                                <textarea class="form-control" v-model="defaultAvatarList" rows="10"></textarea>
                            </div>
                        </div>
                        <div v-else-if="key == 'assets.user.tags'" class="form-group">
                            <label class="block"><em class="key">{{cfg.paramKey}}</em>{{cfg.name}} <span class="tip">( {{cfg.remark}} )</span><span class="clearfix"></span></label>
                            <div class="padding10">
                                <div class="form-group">
                                    <label>默认标签</label>
                                    <div class="padding10">
                                        <input type="text" class="form-control" v-model="defaultTags" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>最大标签数</label>
                                    <div class="padding10">
                                        <input type="text" class="form-control" v-model="form[key].limit" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="key == 'assets.user.report.category'" class="form-group">
                            <label class="block"><em class="key">{{cfg.paramKey}}</em>{{cfg.name}} <span class="tip">( {{cfg.remark}} )</span><span class="clearfix"></span></label>
                            <div class="padding10">
                                <input type="text" class="form-control" v-model="defaultReportCategory" :placeholder="config[key].name" />
                            </div>
                        </div>
                        <div v-else class="form-group">
                            <label class="block"><em class="key">{{cfg.paramKey}}</em>{{cfg.name}} <span class="tip">( {{cfg.remark}} )</span></label>
                            <div class="padding10">
                                <input type="text" class="form-control" v-model="form[key]" :placeholder="config[key].name" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label></label>
                        <p><input type="submit" class="btn btn-primary" value="保存设置"/></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
Vue.config.debug = true
function get_request_url(qs) {
    var segment = location.pathname.replace('.html', '').split('/').pop();
    var url = str_format('app/config/{0}?{1}', segment, qs ? qs : '');
    return url;
}
var vm  = T.vm = new Vue({
	data:{
        active : '',
        config : {},
        form : {
            
        }
    },
	watch:{
        
    },
    created:function(){
        var vm = this;
        apiget(get_request_url(),function(res){
            if(res.code>0){
                vm.config = res.data;
                var form = {};
                $.map(res.data,function(value,key){
                    console.log([key,' -> ',value.paramValue].join(' '))
                    var type = value.type;
                    var value = value.paramValue;
                    if($.inArray(type,'object,array,json'.split(',')>-1)){
                        try{
                            value = JSON.parse(value);
                        }
                        catch(e){
                            console.log(str_format('vm.created / JSON.parse error : {0}',value))
                        }
                        
                    }
                    form[key] = value;
                    vm.$set(vm.form,key,value);
                })
                
                vm.$mount('#webpage');


                $('em.key').on('click',function(e){
                    var tag = e.target || e.srcElement;
                    window.getSelection().selectAllChildren(tag);
                })
            }
        })
    },
    computed:{
        defaultAvatarList : {
            get : function(){
                var vm = this;
                var value = vm.form['assets.user.defaultAvatar']['list'];
                try{
                    return value.join('\n');
                }
                catch(e){
                    console.log(value)
                    console.log(e);
                }
            },
            set : function(str){
                vm.form['assets.user.defaultAvatar']['list'] = str.split('\n')
            }
        },
        defaultTags : {
            get : function(){
                var vm = this;
                var value = vm.form['assets.user.tags']['list'];
                try{
                    return value.join(',');
                }
                catch(e){
                    console.log(value)
                    console.log(e);
                }
            },
            set : function(str){
                vm.form['assets.user.tags']['list'] = str.split(',')
            }
        },
        defaultReportCategory : {
            get : function(){
                var vm = this;
                var value = vm.form['assets.user.report.category'];
                try{
                    return value.join(',');
                }
                catch(e){
                    console.log(value)
                    console.log(e);
                }
            },
            set : function(str){
                vm.form['assets.user.report.category'] = str.split(',')
            }
        }
    },
	methods: {
        queryConfigList : function(str){
            if(!str){
                return this.config;
            }
            var keys = str.split(',');
            var ret = {};
            $.map(this.config,function(v,k){
                if($.inArray(k,keys)>-1){
                    ret[k] = v;
                }
            });
            return ret;
        },
        save : function(){
            var data = {};
            var vm = this;
            $.map(this.config,function(raw,key){
                var value  = vm.form[key];
                console.log([key,value])
                console.log(raw)
                if(raw.type != 'string'){
                    value = JSON.stringify(value,null,2);
                }
                data[key] = value;
            })
            console.log(data);
            postjson(get_request_url('action=post'),data).then(function(res){
                if(res.code>0){
                    alert('保存配置成功')
                }
                else{
                    alert(res.msg);
                }
                console.log(res);
            });
            return false;
        }
	}
});
</script>
</body>
</html>